<template>
  <div>
    <!-- 使用数据方式1 - 通过 $store-->
    <div>count={{ $store.state.count }}</div>
    <!-- 使用数据方式2 通过计算属性简化末班 -->
    <div>count={{ count }}</div>
    <button @click="add">+1</button>
    <button @click="$store.commit('add')">+1</button>
    <button @click="$store.commit('addN', 3)">+N</button>
    <button @click="addN(3)">+N</button>
    <button @click="$store.dispatch('addSync')"> +1 aSync</button>
    <!-- 调用actios方式2 - 通过映射 -->
    <button @click="addSync">+1 aSync</button>
    <!-- 调用actios 传参 -->
    <button @click="$store.dispatch('addNSync', 5)"> +N aSync</button>
    <button @click="addNSync(5)">+N aSync</button>

    <!-- 调用getters.方式1 通过$store -->
    <div>{{ $store.getters.showCount }}</div>
    <div>{{ showCount }}</div>
    <!-- 使用模块当中数据 -->
    <!--  $store.state.模块名,数据名 -->
    <div>token={{ $store.state.test.token }}</div>
    <button @click="$store.commit('setToken', 'abc')">setToken</button>

    <!-- 测试icon组件图标 -->
    <svg-icon
      icon-class="eye"
      class-name="color-eye"
    ></svg-icon>
  </div>
</template>

<script>
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
export default {
  name: 'LearIndex',
  components: {},
  props: {
  },
  data() {
    return {

    }
  },
  computed: {
    ...mapState(['count', 'age']),
    ...mapGetters(['showCount'])

  },
  created() {},
  mounted() {},
  methods: {
    ...mapMutations(['add', 'addN']),
    ...mapActions(['addSync', 'addNSync'])
  }
}
</script>

<style lang="scss" scoped>
  .color-eye {
    color: red;
  }
</style>
